// pages/forum/index.js
const {
  getPosts
} = require("../../api/forum")
Page({

  /**
   * 页面的初始数据
   */
  data: {
    active: 0,
    bbsList: [],
    loading: true,
    // 左侧的数据
    leftList: [],
    // 右侧的数据
    rightList: [],
    leftHeight: 0,
    rightHeight: 0,
    pageNum:1,
    pageSize:30,
    loadMoreData:false
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.initData();
  },

  initData(){
    this.data.loadMoreData = true;
    getPosts(this.data.pageNum, this.data.pageSize).then((res) => {
      console.log(res);
      if (res.data.code == 0) {
        const list = res.data.rows
        this.data.list = list;
        this.handleList()
        this.setData({
          // bbsList:res.data.rows,
          loading: false,
          // leftList:leftList,
          // rightList:rightList
        })
      }
    })
  },

  handleList() {
    // 递归的出口在哪里
    let {
      leftHeight,
      leftList,
      rightHeight,
      rightList,
      list
    } = this.data;

    if (list.length == 0) {
      this.data.loadMoreData = false;
      return;
    }

    // 在去处理列表的时候就需要考虑一下了，
    // 基本原则，就是先从左侧开始放起
    // 为了保证两个列表高度是相近的，我们每个元素在放置的时候优先放置到比较矮的一列
    // 需要得到每一图片的宽高，主要需要知道哪一列是比较高的。
    // wx.getImageInfo({})
    // 由于获取图片信息的api是异步的，所以我们需要处理完一个之后再去处理另一个，直到所有数据都处理完
    const item = list.shift();
    // 进行性能优化的时候，对媒体文件进行压缩
    item.coverImgUrl = item.coverImgUrl +"?imageView&thumbnail=300x0"
    wx.getImageInfo({
      src: item.coverImgUrl,
      success: (res) => {
        // res.height => 高度
        // res.width => 宽度
        // 2208 * 1242 图片1
        // 600 * 50 图片2
        // 图片的纵横比是不变的   （实际高度 / 实际宽度）* 显示出来的宽度 = 显示出来的高度
        // 目的只是为了比较高低， 所有的图片都是 * 的同一个值，所以这个值的多少不影响高低的比较的
        if (leftHeight <= rightHeight) {
          // 放在左边
          leftList.push(item);
          leftHeight += res.height / res.width
        } else {
          rightList.push(item);
          rightHeight += res.height / res.width
        }
      },
      fail: (err) => {
        console.log(err);
      },
      complete: () => {
        // 不过成功还是失败都会执行complete
        // 可以通过什么方式，来逐个处理数据，直到所有数据都处理完
        this.setData({
          leftList,
          rightList,
          leftHeight,
          rightHeight
        })
        this.handleList();
      }
    })

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    wx.setTabBarStyle({
      backgroundColor: '#000736',
      color:"#ffffff"
    })
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
   
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    if(this.data.loadMoreData){
      return;
    }
    this.data.pageNum += 1
    this.initData()
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },

})